<template>
  <div class="zhu">
    <div class="shang">
      <van-nav-bar title="订单">
        <template #right class="biaobiao">
          <van-icon name="search" size="18"/>
          <van-icon name="chat-o" size="18" badge="9"/>
        </template>
      </van-nav-bar>
      <div class="shang_one">
        <div class="recently">
          <span style="font-size: 24px;font-weight: bold;">最近购买</span>
          <span style="color:#868688;font-size: 18px">查看更多商家
						<van-icon name="arrow"/>
					</span>
        </div>
        <div class="weizhi">
          <div class="recently_mai" v-for="itmes in list" :key="itmes">
            <van-image width="90px" height="90px" fit="cover" radius="5px 5px 0 0"
                       :src="itmes.dishes.dishesPhotoOrVideoUrl"/>
            <div class="recently_xx">
              <span style="font-size: 16px;font-weight: bold">{{ itmes.dishes.dishesName }}</span>
              <span style="font-size: 12px;color:#868688">购买<span>{{ itmes.number }}</span>次</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="xia">
      <!-- animated动画效果 swipeable滑动切换 before-change="beforeChange()" -->
      <van-tabs class="van-tabs" @click-tab="onClickTab" v-model:active="active" animated swipeable>
        <van-tab title="全部订单">
          <div>
            <div class="OrderInfo" v-for="index in list" :key="index" @touchstart="gotouchstart(index)"
                 @touchmove="gotouchmove" @touchend="gotouchend">
              <div class="OrderInfo_dian">
                <div>
                  <van-image width="50px" height="50px" fit="cover" radius="10px"
                             :src="index.shop.headPortrait"/>
                </div>
                <div class="ju">
                  <div class="dian_min">
										<span>{{ index.shop.shopName }}
											<van-icon name="arrow"/>
										</span>
                    <span>{{ index.states }}</span>
                  </div>
                  <div>
                    <van-tag plain type="danger">标签</van-tag>
                    <van-tag plain type="danger">标签</van-tag>
                    <van-tag plain type="danger">标签</van-tag>
                    <van-tag plain type="danger">标签</van-tag>
                  </div>
                </div>
              </div>
              <div class="Order_nr">
                <div class="Order_tutu">
                  <van-image width="10s0" height="80" radius="10px"
                             :src="index.dishes.dishesPhotoOrVideoUrl"/>
                  <span style="font-size: 14px;width: 150px;">
										<span>{{ index.dishes.title }}</span>
									</span>
								</div>
								<p class="pspan">
									<span style="font-weight: bold">￥<span>{{ index.dishes.price }}</span></span>
									<span
										style="font-size: 12px;color:#868688;">共<span>{{ index.number }}</span>件</span>
								</p>
							</div>
							<div class="an_niu">
								<van-button round size="small">再来一单</van-button>
								<van-button @click="toEvaluation(index.id)" round size="small">评&ensp;价</van-button>
							</div>
						</div>
					</div>
				</van-tab>
				<van-tab title="待评价">
					<div>
						<br>
						<van-button @click="toMyEvaluationList()" round block>我的评价</van-button>
						<div class="div">
							<!--  -->
							<!-- <van-image class="backgroundPictureUrl" width="100%" height="200px" fit="cover" lazy-load
								:src="user.backgroundPictureUrl" alt="用户背景图片" /><br /> -->
							<!-- @click="toDishesDetails(item.id)" -->
							<van-card class="van-card" v-for="(item) in pendingEvaluationArray" :key="item">
									<span title="标题">{{item.shop_name}}</span>
									<template #tags>
										<van-image class="dishes-image" width="60px" height="60px" fit="cover" lazy-load
											:src="item.head_Portrait" alt="缺省图" />
										<br />
										<span title="订单时间">{{item.order_time}}</span><br />
										<!-- <span title="标题">{{item.title}}</span> -->
										<span class="evaluationTitle" title="评价标题">评价晒图得10米粒，首次写评奖励翻倍</span>
										<van-button @click="toEvaluation(item.orders_id)">评价</van-button>
									</template>
							</van-card>
						</div>
					</div>
					<div>
						<h2>为你推荐</h2>
						
					</div>
				</van-tab>
				<van-tab title="退款">
					<h1>退款</h1>
				</van-tab>
			</van-tabs>
		</div>
	</div>
</template>
<script>
import diantu from "../assets/pikaqiu.png"

export default {
  updated() {
    console.log("active=" + this.active)
  },
  mounted() { //挂载之后执行的方法
    this.getOrder()
    this.getPendingEvaluationArray()
    this.getTabActive();

  },
  methods: {
    getTabActive() {
      if (this.$route.query.active != '' || this.$route.query.active != null) {

        this.active = this.$route.query.active
        console.log("active=" + this.active)
        // this.active =
      }

    },
    toEvaluation(ordersId) {
      console.log("ordersId=" + ordersId);
      this.$router.push({
        path: '/writingEvaluation',
        query: {
          ordersId: ordersId
        }
      })
    },
    onClickTab() {
      console.log("onClickTab()");
    },
    toMyEvaluationList() {
      this.$router.push('/myEvaluationList')
    },
    getPendingEvaluationArray() { //获取待评价列表

      this.$axios.get('/evaluation/pending/evaluation/list/userId')
          .then(res => {
            this.pendingEvaluationArray = res.result.data
          })
          .catch(error => {
            console.log("error:" + error)
          })
    },
    getOrder() {
      // let userId = this.$route.query.id;
      // console.log("userId=" + userId);
      this.$axios.get('/orders/orderlistById', {
        // params: {
        // 	userId: 2
        // }
      })
          .then(res => {
            this.list = res.result.list;
            // console.log("this.entity.dishesName="+this.entity.dishesName);
            console.log("this.list=" + res.list);
          }).catch(error => {
        console.log("error:" + error)
      })
    },
    gotouchstart(index) {
      clearTimeout(this.timeOutEvent); //清除定时器
      this.timeOutEvent = 0;
      this.timeOutEvent = setTimeout(() => {
        //执行长按要执行的内容，
        // alert(123)
        this.$dialog.confirm({
          title: "确定删除订单？",
          message: "订单删除后将无法恢复",
          confirmButtonText: "删除", //改变确认按钮上显示的文字、右
          cancelButtonText: "取消" //改变取消按钮上显示的文字、左
        }).then(() => {
          // this.list.forEach(item => {
          console.log(index.id);
          this.$axios.get('/orders/delete', {
            params: {
              id: index.id
            }

          }).then(() => {
            this.$message({
              message: "删除成功",
              type: 'success'
            })
            window.location.reload();
          })
              .catch(error => {
                console.log("error:" + error)
              })
          // })
          console.log("点击了确认按钮噢")
        }).catch(() => {
          console.log("点击了取消按钮噢")
        })
      }, 600); //这里设置定时
    },
    //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
    gotouchend() {
      clearTimeout(this.timeOutEvent);
      if (this.timeOutEvent != 0) {
        //这里写要执行的内容（尤如onclick事件）
      }
    },
    //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
    gotouchmove() {
      clearTimeout(this.timeOutEvent) //清除定时器
      this.timeOutEvent = 0
    },
  },
  data() {
    return {
      pendingEvaluationArray: [],
      list: [],
      active: 1,
      Diantu: diantu,
      purchase: [{
        dianming: "卤一嘴",
        count: 6,
        url: require("../assets/meimei.png")
      },
        {
          dianming: "吃香喝辣",
          count: 8,
          url: require("../assets/meimei.png")
        },
        {
          dianming: "卤一嘴",
          count: 6,
          url: require("../assets/meimei.png")
        },
        {
          dianming: "吃香喝辣",
          count: 8,
          url: require("../assets/meimei.png")
        },
        {
          dianming: "吃香喝辣",
          count: 8,
          url: require("../assets/meimei.png")
        },
      ],
      allOrders: [{
        dming: "书亦烧仙草",
        state: "",
        nr: "香辣手撕鸡+加配菜+饮料",
        jiage: 10.8,
        count: 1,
        shopurl: require("../assets/meimei.png"),
        dianpuurl: require("../assets/xiaomei.png")
      },
        {
          dming: "吃香喝辣",
          state: "",
          nr: "香辣手撕鸡+加配菜+饮料",
          jiage: 15.8,
          count: 2,
          shopurl: require("../assets/pikaqiu.png"),
          dianpuurl: require("../assets/xiaomei.png")
        }
      ]
    }
  },
  computed: {
    // test() {

    // }
  },
  watch: {
    // (			    // () => book.name,
    //     // () => {
    //     //     console.log("书名改变了");
    //     // }
    // )
  }
}
</script>
<style scoped>
.van-tabs {
  margin-bottom: 40px;
}

.evaluationTitle {
  color: rgb(254, 153, 0);
}

.shang {
  height: 320px;
  background: linear-gradient(#ffcc33, #fddacf, #fedfe8);
  display: flex;
  flex-direction: column;

}

.van-nav-bar .van-icon {
  margin-left: 20px;
}

.shang .van-nav-bar {
  background: none;
  margin-top: 20px;
}

.shang .van-nav-bar__content {
  height: 45px;
}

.shang_one {
  height: 210px;
  width: 345px;
  margin-top: 20px;
  background-color: white;
  border-radius: 10px;
  align-self: center;
}

.recently {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 20px 10px 0px 10px;
}

.recently_mai {
  width: 90px;
  height: 130px;
  border-radius: 10px;
  background-color: #e7e4e4;
  margin-left: 10px;
}

.weizhi {
  margin-top: 12px;
  display: flex;
  flex-direction: row;
  overflow-y: hidden;
  justify-content: space-between;
}

.weizhi .van-image__img {
  margin-left: 0;
}

.recently_xx {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.xia .van-tab {
  justify-content: flex-start;
}

.xia .van-tabs__line {
  bottom: 15px;
  left: -33px;
  width: 15px;
  height: 7px;
  background: #ffcc33;
}

.xia .van-tab__text--ellipsis {
  font-size: 18px;
  font-weight: bold;
}

.OrderInfo {
  height: 215px;
  border-radius: 10px;
  border: 1px solid red;
  margin: 12px;
}

.OrderInfo_dian {
  height: 50px;
  margin: 10px;
  display: flex;
  flex-direction: row;

}

.dian_min {
  width: 280px;
  display: flex;
  justify-content: space-between;
}

.ju {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.Order_nr {
  margin: 0 10px 20px 10px;
  height: 80px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.pspan {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.Order_tutu {
  width: 300px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.an_niu {
  display: flex;
  flex-direction: row-reverse;
  font-weight: bold;
}

.an_niu .van-button--round {
  border-radius: 10px;
  margin-right: 10px;
}
</style>
